<template>
  <el-slider
    ref="el"
    v-model="computedValue"
    style="width: 100%"
    v-bind="$props.props"
    v-on="$listeners"
  />
</template>

<script>
import Vue from 'vue';
import {Slider} from "element-ui";
Vue.use(Slider);

/**
 * 滑块组件 element-ui的[el-slider](https://element.eleme.cn/2.13/#/zh-CN/component/slider)
 * @author maolin
 */
export default {
  name: "ErpFormSlider",
  components: {
  },
  props: {
    /**
     * 标题
     * @public
     */
    title: {
      type: String,
      default: '',
    },
    /**
     * 字段
     * @public
     */
    field: {
      type: String,
      default: ''
    },
    /**
     * 值
     * @public
     */
    value: {
      default () {
        return '';
      }
    },
    /**
     * 属性
     * @public
     */
    props: {
      type: Object,
      default () {
        return {
        };
      }
    },
  },
  computed: {
    computedValue: {
      get () {
        return this.value;
      },
      set (val) {
        /**
         * 更新值
         * @param {string|number} val 值
         * @public
         */
        this.$emit('value-change', val);
      }
    }
  },
  mounted() {
  },
  methods: {
  }
};
</script>

<style scoped>

</style>
